<template>
	<el-backtop :right="10" :bottom="10" visibility-height="10" />
	<el-container>
		<el-header>
			<div class="left-panel">
				<div class="left-panel-search">
					开工时间： <el-date-picker v-model="open_time" type="datetime" placeholder="设置开工时间" format="YYYY-MM-DD"/>
					<el-button icon="el-icon-success-filled" @click="saveOpenTime" type="primary">保存</el-button>
					<el-button icon="el-icon-plus" @click="addStaff" type="primary">添加员工</el-button>
				</div>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input placeholder="员工名" />
					<el-button type="primary" icon="el-icon-search" ></el-button>
				</div>
			</div>
		</el-header>
		<el-row :gutter="24" style="padding-top: 10px; margin: 0;">
			<el-col :lg="8" :md="12" v-for="item in list.staffs" :key="item.id">
				<el-card>
					<template #header>
						<div class="">
							<el-header>
								<div class="left-panel">{{item.name}} | {{item.phone}}</div>
								<div class="right-panel">
									<el-button size="small" v-if="!item.is_manage" @click="setManage(item)" type="warning">设为车间管理</el-button>
									<el-button size="small" v-if="item.is_manage" @click="setManage(item)" type="info">取消管理</el-button>
									<el-button size="small" @click="showSalary(item)" type="primary">查看工资</el-button>
									<el-button size="small" @click="shouProcess(item)" type="success">分配工序</el-button>
									<el-button size="small" @click="delStaff(item)" type="danger">离职</el-button>

								</div>
							</el-header>
						</div>
					</template>
					<el-collapse>
						<el-collapse-item title="可做工序(点击打开)" name="1">
							<el-space wrap>
								<el-tag style="font-size: 18px;font-weight: bolder;" size="large" v-for="it in item.process_uses" :key="it.id" class="process" effect="dark">{{it.name}}</el-tag>
							</el-space>
						</el-collapse-item>
					</el-collapse>
				</el-card>
			</el-col>
		</el-row>

	</el-container>

	<staffProcess-dialog v-if="dialog.save" ref="staffProcessDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></staffProcess-dialog>
	<save-dialog v-if="dialog.staffsave" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.staffsave=false"></save-dialog>
	<showSalary-dialog v-if="dialog.show" ref="showSalaryDialog"></showSalary-dialog>
</template>
<script>
	import staffProcessDialog from './staffProcess'
	import showSalaryDialog from './showSalary'
	import saveDialog from './save'
	export default {
		components: {
			staffProcessDialog,
			showSalaryDialog,
			saveDialog
		},
		data() {
			return {
				open_time: '',
				list: {
					staffs: [],
					query: {
						name: '',
						phone: '',
					}
				},
				dialog: {
					save : false,
					show: false,
					staffsave: false
				}
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				var res = await this.$API.staff.list.get(this.list.query)
				if (res.code == 200) {
					this.list.staffs = res.staffs
					this.open_time = res.open_time
				}
			},
			shouProcess(row) {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.staffProcessDialog.open('edit').setData(row)
				})
			},
			showSalary(row) {
				this.dialog.show = true
				this.$nextTick(() => {
					this.$refs.showSalaryDialog.open('show').setData(row)
				})
			},
			handleSaveSuccess() {
				this.list.staffs = []
				this.getList()
			},
			addStaff() {
				this.dialog.staffsave = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
			},
			async delStaff(staff) {
				var confirmRes = await this.$confirm('确定离职'+ staff.name +'吗？', '提示', {
					type: 'warning',
					confirmButtonText: '离职',
					confirmButtonClass: 'el-button--primary'
				}).catch(() => {})

				if(!confirmRes){
					return false
				}

				var res = await this.$API.staff.del.post({id: staff.id})

				if (res.code == 0) {
					this.$message.error(res.message)
					return 
				}

				this.$message.success(res.message)
				window.location.reload()

			},
			async setManage(staff) {
				var confirmRes = await this.$confirm('确定设置'+ staff.name +' 【车间管理】 吗？', '提示', {
					type: 'warning',
					confirmButtonText: '设置',
					confirmButtonClass: 'el-button--primary'
				}).catch(() => {})

				if(!confirmRes){
					return false
				}
				var res = await this.$API.staff.setManage.post({id: staff.id})

				this.$message.success(res.message)

				if (res.code == 200) {
					this.getList()
					
				}
			},
			async saveOpenTime() {
				var res = await this.$API.staff.setOpenTime.post({open_time: this.open_time});
				if (res.code == 200) {
					this.$message.success(res.message)
				} else {
					this.$message.error("设置失败")
				}
			}
		}
	}
</script>
<style>
	.c_title {
		padding: 5px;
		border-bottom: 1px solid #ddd;
	}


</style>